<template>
	<view class="content">
		<view class="time-area">
			<view class="time-box" v-for="(item,index) in timeList" :key="index">
				<view class="time-box-time" :class="index == 0 ? 'time-box-time-active':''">{{item.beginTime}}</view>
				<view class="time-box-text time-box-text-active" v-if="index == 0">抢购中</view>
				<view class="time-box-text" v-if="index != 0">即将开始</view>
			</view>
		</view>

		<view class="finish-area">
			<view class="finish-left">
				抢购中，先到先得
			</view>
			<view class="finish-right">
				<span>距结束</span>
				<view class="finish_boxs">{{hour}}</view>:<view class="finish_boxs">{{min}}</view>:<view class="finish_boxs">{{seconds}}</view>
			</view>
		</view>

		<view class="goods-area">
			<view class="goods-items" v-for="(goods,i) in goodsList" :key="i" @tap="goGoods(goods.promotionGoodsId)">
				<image class="goods-img" :src="goods.goodsImageMain" mode=""></image>
				<view class="goods-right">
					<view class="goods-tittle">{{goods.goodsName}}</view>
					<view class="goods-infos">
						<view class="goods-tips-bg"></view>
						<view class="goods-tips" v-if="goods.tagName">{{goods.tagName}}</view>
						<view class="goods-infos-txt">已抢{{numFilter(100-goods.stockNow / goods.stockLimit * 100)+'%'}}</view>
						<view class="goods-infos-percent-back">
							<view class="goods-infos-percent-inside" v-if="goods.stockNow != '0%'" :style="{width: 100-(goods.stockNow / goods.stockLimit * 100)+'%'}"></view>
						</view>
					</view>
					<view class="goods-price-area">
						<view class="goods-price" v-if="goods.cutPrice"><a>￥</a>{{goods.cutPrice}}</view>
						<view class="goods-price" v-if="!goods.cutPrice"><a>￥</a>{{goods.price}}</view>
						<view class="goods-price-before">{{goods.price}}</view>
						<view class="goods-price-qiang">马上抢</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				// 时间
				ban: true,
				current: '',
				percent: '100%',
				timeList: [],
				goodsList: [],
				hour: '',
				min: '',
				seconds: '',
				endTime: '',
			}
		},
		onLoad() {},
		onShow() {
			this.selectTime()
		},
		methods: {
			//时段
			selectTime() {
				uni.request({
					url: `https://az49.ujquan.com/store/api/uplus/v1/day/cut/time/list`,
					data: {},
					method: "GET",
					header: {},
					success: (res) => {
						this.timeList = res.data.data.timeList
						var now = Date().substring(16, 24)
						this.hour = res.data.data.timeList[0].endTime.substring(11, 13) - now.substring(0, 2) - 1 //小时
						this.min = 60 - now.substring(3, 5) //分钟
						this.seconds = 60 - now.substring(6, 8) //秒
						for (var i = 0; i < this.timeList.length; i++) {
							var begin = res.data.data.timeList[i].beginTime //开始时间
							this.endTime = res.data.data.timeList[i].endTime //结束时间
							this.timeList[i].beginTime = begin.substring(11, 16) //时间
							var timeId = this.timeList[i].activityPromotionId
						}
						this.selectGoods(timeId) //查询秒杀列表
					}
				});
			},
			selectGoods(timeId) { //列表查询
				uni.request({
					url: `https://az49.ujquan.com/store/api/uplus/v1/day/cut/list`,
					data: {
						'activityPromotionTimeSliceId': timeId
					},
					method: "GET",
					header: {},
					success: (res) => {
						this.goodsList = res.data.data
						console.log(this.goodsList)
					}
				});
			},
			numFilter(value) {
				// 截取当前数据到小数点后三位
				let tempVal = parseFloat(value).toFixed(1)
				let realVal = tempVal.substring(0, tempVal.length - 2)
				return realVal
			},
			goGoods(id) {
				console.log(id)
			}
		}
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
		height: 100%
	}

	.content {
		width: 100%;
		height: 100%;
	}
	
	.time-area {
		white-space: 100%;
		height: 73px;
		display: flex;
		flex-wrap: wrap;
		background: linear-gradient(90deg, rgba(255, 52, 101, 1) 0%, rgba(247, 51, 38, 1) 100%);
	}

	.time-box {
		width: 20%;
		height: 100%;
	}

	.time-box-time {
		width: 100%;
		height: 50%;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 196, 205, 1);
		line-height: 55px;
		text-align: center;
	}

	.time-box-text {
		margin-top: 7px;
		width: 100%;
		text-align: center;
		height: 30%%;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 196, 205, 1);
		line-height: 16px;
	}

	.time-box-time-active {
		font-size: 25.5px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 51px;
	}

	.time-box-text-active {
		width: 90%;
		margin-left: 5%;
		margin-top: 7px;
		height: 16px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(254, 202, 208, 1) 100%);
		border-radius: 17px;
	}

	.finish-area {
		padding: 0 10px;
		height: 45px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		border-bottom: 1px solid #E5E5E5;
	}

	.finish-left {
		width: 50%;
		height: 45px;
		line-height: 45px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.finish-right {
		height: 45px;
		line-height: 45px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 67, 56, 1);
		display: flex;
		position: absolute;
		right: 10px;
	}

	.finish-right span {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 45px;
		float: right;
		margin-right: 3px;
	}

	.finish_boxs {
		width: 15px;
		height: 15px;
		background: rgba(254, 67, 56, 1);
		border-radius: 1px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 15px;
		margin: 15px 3px;
		text-align: center;
	}

	.goods-area {
		width: 100%;
		padding-top: 9px;
		background: rgba(255, 255, 255, 1);
	}

	.goods-items {
		width: 100%;
		height: 120px;
		display: flex;
		flex-wrap: wrap;
		border-bottom: #E5E5E5 1px solid;
	}

	.goods-img {
		width: 100px;
		height: 100px;
		margin: 10px;
	}

	.goods-right {
		height: 120px;
		position: absolute;
		right: 10px;
		left: 130px;
	}

	.goods-tittle {
		font-size: 15px;
		height: 40px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 20px;
		margin-top: 10px;
		margin-right: 10px;
	}

	.goods-infos {
		width: 100%;
		height: 20px;
		margin-top: 12px;
		display: flex;
	}
	
	.goods-tips-bg {
		width: 51px;
		height: 20px;
	}

	.goods-tips {
		width: 49px;
		height: 20px;
		border-radius: 10px;
		border: 1px solid rgba(254, 67, 56, 1);
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 67, 56, 1);
		line-height: 20px;
		text-align: center;
		position: absolute;
	}

	.goods-infos-txt {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 22px;
		width: 75px;
		text-align: right;
		padding-right: 10px;
	}

	.goods-infos-percent-back {
		width: 120px;
		height: 10px;
		margin-top: 6px;
		background: rgba(255, 220, 222, 1);
		border-radius: 5px;
	}

	.goods-infos-percent-inside {
		height: 10px;
		border-radius: 6px;
		background: linear-gradient(90deg, rgba(255, 95, 53, 1) 0%, rgba(255, 48, 57, 1) 100%);
	}

	.goods-price-area {
		width: 100%;
		height: 20px;
		margin-top: 7px;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-price {
		height: 20px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(254, 67, 56, 1);
		line-height: 20px;
		padding-right: 7px;
		display: flex;
	}

	.goods-price a {
		font-size: 12px;
	}

	.goods-price-before {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 24px;
		text-decoration: line-through;
	}

	.goods-price-qiang {
		width: 52.5px;
		height: 22px;
		background: linear-gradient(90deg, rgba(255, 93, 53, 1) 0%, rgba(255, 48, 57, 1) 100%);
		border-radius: 11px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 22px;
		text-align: center;
		position: absolute;
		right: 0;
	}
</style>
